import React, { Component } from 'react'
import { getCurrentInstance } from '@tarojs/taro'
import { View, Button, Text, Picker } from '@tarojs/components'
import { getIndex, educationList, studyStyleList, yesOrNoList } from '../../utils/constant'
import { AtInput, AtDivider, AtButton } from 'taro-ui'
import moment from 'moment'
import './index.scss'
import { updateEducationInfo, addEducationInfo, findDictionary } from '../../api/user'

class Page extends Component {
  constructor (props) {
    super(props)
    this.state = {
      encodeOid: '',
      OperationType: '',
      educationFloat: true,
      degreeList: [],
      checkObj: {
        grade: '所得学位',
        graduatedate: '毕业时间',
        istopgrade: '是否最高学历',
        school: '学校名称',
        schooldate: '入学时间',
        speciality: '所学专业',
        studystyle: '学习方式'
      },
      form: {
        grade: '',
        degreeNum: '',
        empoid: '',
        gradeNum: '',
        graduatedate: '',
        istopgrade: '',
        school: '',
        schooldate: '',
        speciality: '',
        studystyle: ''
      }
    }
  }

  componentWillMount () { }

  componentDidMount () {
    let { oid, OperationType, data, encodeOid } = getCurrentInstance().router.params
    let { form } = this.state
    form.empoid = oid;
    findDictionary().then(res =>{
      if (res.flag)
        this.setState({degreeList: res.data})
    });
    if (data) {
      form = JSON.parse(decodeURIComponent(data))
      form.schooldate = moment(form.schooldate).format('YYYY-MM-DD')
      form.graduatedate = moment(form.graduatedate).format('YYYY-MM-DD')
    }
    this.setState({ encodeOid, form, OperationType })
  }

  componentWillUnmount () { }

  handlePickerChange = (e, name, list) => {
    let value = list[e.detail.value].value
    let { form } = this.state
    let newData = { ...form }
    newData[name] = value
    this.setState({
      form: newData
    })
    return value
  }

  handleDatePickerChange = (e, name) => {
    let { form } = this.state
    let newData = { ...form }
    newData[name] = e.detail.value
    this.setState({
      form: newData
    })
    return e.detail.value
  }

  handleInputChange = (value, name) => {
    const { form } = this.state
    let newData = { ...form }
    newData[name] = value
    this.setState({
      form: newData
    })
    return value
  }

  handleBack = (value) => {
    let { form, encodeOid } = this.state
    Taro.redirectTo({ url: '/pages/portal/index?oid=' + encodeOid })
  }

  handleSubmit = () => {
    let { form, OperationType, checkObj, encodeOid } = this.state;
    let { isDelete, operatetime, degreeNum, gradeNum, ...data } = form;
    let arr;
    if ((arr = Object.keys(data).filter(v=>!data[v])).length>0) {
      Taro.showToast({
        title: `请填写${checkObj[arr[0]]}`,
        icon: 'none',
        duration: 1500
      });
      return;
    }
    if (OperationType && OperationType === 'add') {
      addEducationInfo(form).then(res => {
        Taro.redirectTo({ url: '/pages/portal/index?oid=' + encodeOid })
      });
    } else if (OperationType && OperationType === 'update') {
      updateEducationInfo({
        ...form,
        schooldate: new Date(form.schooldate),
        graduatedate: new Date(form.graduatedate)
      }).then(res => {
        Taro.redirectTo({ url: '/pages/portal/index?oid=' + encodeOid })
      })
    }
  }

  render () {
    const { degreeList } = this.state;
    return (
      <View className='education'>
        <AtDivider content='请填写教育信息' fontColor='#50C77A'/>
        <View>
          <View className='education__form'>
            <View className='education__form-label'>学校名称<View className='required'>*</View></View>
            <AtInput
              name='value'
              type='text'
              placeholder='请填写'
              value={this.state.form.school}
              onChange={(e) => this.handleInputChange(e, 'school')}
            />
          </View>
          <View className='education__form'>
            <View className='education__form-label'>所学专业<View className='required'>*</View></View>
            <AtInput
              name='value'
              type='text'
              placeholder='请填写'
              value={this.state.form.speciality}
              onChange={(e) => this.handleInputChange(e, 'speciality')}
            />
          </View>
          <View className='education__form'>
            <View className='education__form-label'>入学时间<View className='required'>*</View></View>
            <Picker className='education__form-picker' mode='date' rangeKey='label'
                    onChange={(e) => this.handleDatePickerChange(e, 'schooldate')}>
              {
                this.state.form.schooldate
                  ? <View className='education__form-picker-value'>{this.state.form.schooldate}</View>
                  : <View className='education__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>
          <View className='education__form'>
            <View className='education__form-label'>毕业时间<View className='required'>*</View></View>
            <Picker className='education__form-picker' mode='date' rangeKey='label'
                    onChange={(e) => this.handleDatePickerChange(e, 'graduatedate')}>
              {
                this.state.form.graduatedate
                  ? <View className='education__form-picker-value'>{this.state.form.graduatedate}</View>
                  : <View className='education__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>
          <View className='education__form'>
            <View className='education__form-label'>学习方式<View className='required'>*</View></View>
            <Picker className='education__form-picker' mode='selector' range={studyStyleList} rangeKey='label'
                    onChange={(e) => this.handlePickerChange(e, 'studystyle', studyStyleList)}>
              {
                this.state.form.studystyle
                  ? <View
                    className='education__form-picker-value'>{studyStyleList[getIndex(studyStyleList, this.state.form.studystyle)].label}</View>
                  : <View className='education__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>
          <View className='education__form'>
            <View className='education__form-label'>学历<View className='required'>*</View></View>
            <Picker className='portal__form-picker' mode='selector' range={educationList} rangeKey='label'
                    onChange={(e) => this.handlePickerChange(e, 'grade', educationList)}>
              {
                this.state.form.grade
                  ? <View
                    className='education__form-picker-value'>{educationList[getIndex(educationList, this.state.form.grade)].label}</View>
                  : <View className='education__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>
          {
            degreeList.length > 0
          }
          <View className='education__form'>
            <View className='education__form-label'>学位<View className='required'>*</View></View>
            <Picker className='portal__form-picker' mode='selector' range={degreeList} rangeKey='label'
                    onChange={(e) => this.handlePickerChange(e, 'degree', degreeList)}>
              {
                this.state.form.degree && degreeList.length > 0
                  ? <View
                    className='education__form-picker-value'>{degreeList[getIndex(degreeList, this.state.form.degree)].label}</View>
                  : <View className='education__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>
          <View className='education__form'>
            <View className='education__form-label'>是否最高学历<View className='required'>*</View></View>
            <Picker className='education__form-picker' mode='selector' range={yesOrNoList} rangeKey='label'
                    onChange={(e) => this.handlePickerChange(e, 'istopgrade', yesOrNoList)}>
              {
                this.state.form.istopgrade
                  ? <View
                    className='education__form-picker-value'>{yesOrNoList[getIndex(yesOrNoList, this.state.form.istopgrade)].label}</View>
                  : <View className='education__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>
          <View className='education__form'>
            <View className='education__form-label'>学历证书编号</View>
            <AtInput
              name='value'
              type='text'
              placeholder='请填写完整学历证书编号'
              value={this.state.form.gradeNum}
              onChange={(e) => this.handleInputChange(e, 'gradeNum')}
            />
          </View>
          <View className='education__form'>
            <View className='education__form-label'>学位证书编号</View>
            <AtInput
              name='value'
              type='text'
              placeholder='请填写完整学位证书编号'
              value={this.state.form.degreeNum}
              onChange={(e) => this.handleInputChange(e, 'degreeNum')}
            />
          </View>
        </View>

        <View className='button_group'>
          <AtButton onClick={() => this.handleBack()}>返回</AtButton>
          <AtButton type='primary' onClick={() => this.handleSubmit()}>保存</AtButton>
        </View>
      </View>
    )
  }
}

export default Page
